<template>
  <div class="permission-edit" v-loading="loading">
    <el-form :model="form">
      <el-form-item label="上级菜单" :label-width="formLabelWidth">
        <el-cascader
          :options="options"
          v-model="form.parentId"
          :props="{value:'id',label:'permissionName',children:'childList',checkStrictly:true,emitPath:false}"
          ></el-cascader>
      </el-form-item>
      <el-form-item label="菜单名称" :label-width="formLabelWidth">
        <el-input v-model="form.permissionName" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="权限路径" :label-width="formLabelWidth">
        <el-input v-model="form.resourceUrl" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="菜单权限" :label-width="formLabelWidth">
        <el-input v-model="form.permission" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="菜单类型" :label-width="formLabelWidth">
        <el-select v-model="form.permissionType" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('changeState',false)">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.dialog-footer{
  text-align: center;
}
.el-cascader,.el-select{
  width: 100%;
}
</style>
<script>
export default {
  data () {
    return {
      loading: false,
      formLabelWidth: '120px',
      form: {
        permissionName: null,
        parentId: null,
        permissionType: null,
        resourceUrl: null,
        permission: null
      },
      options: [{
        id: 'root',
        permissionName: '根目录'
      }],
      typeOptions: [
        {
          value: 0,
          label: 'menu'
        },
        {
          value: 1,
          label: 'button'
        }
      ]
    }
  },
  mounted () {
  },
  methods: {
    initSelectOption (id) {
      this.loading = true
      this.$axios.all([this.$axios.get('/org/permission/get-tree-select?exclude=' + id), this.$axios.get('/org/permission/get-by-id?id=' + id)])
      .then(this.$axios.spread((qa, qb) => {
        // 下拉框数据
        this.options = [{
            id: 'root',
            permissionName: '根目录'
          }]
        if (qa.data.code === 200 && qa.data.obj) {
          this.options = this.options.concat(qa.data.obj)
        }
        // 表单数据请求
        if (qb.data.code === 200) {
          this.form = qb.data.obj
        }
        this.loading = false
      }))
    },
    save () {
      this.loading = true
      this.$axios.put('/org/permission/edit', this.form)
      .then(res => {
        this.loading = false
        if (res.data.code === 200) {
          this.$emit('changeState', false)
          this.$emit('reload', false)
          this.$message.success(res.data.msg)
        }
      })
    }
  },
  beforeDestroy () {
    this.$off('reload')
    this.$off('changeState')
  }
}
</script>
